```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CCPlugins - 优化Claude开发的智能命令扩展</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .command-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4em;
            line-height: 0.8;
            margin: 0.1em 0.1em 0.1em 0;
            color: #667eea;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-6 md:px-0">
        <div class="container mx-auto max-w-5xl flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10 fade-in">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">CCPlugins</h1>
                <p class="text-xl md:text-2xl mb-6 opacity-90">为Claude Code CLI设计的智能命令扩展工具</p>
                <p class="text-lg mb-8 opacity-80">通过24个专业命令优化AI驱动的开发工作流，减少冗长输出，提升编码效率</p>
                <div class="flex flex-wrap gap-4">
                    <a href="https://github.com/brennercruvinel/CCPlugins" class="bg-white text-indigo-700 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
                        <i class="fab fa-github mr-2"></i> GitHub项目
                    </a>
                    <a href="#quick-start" class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-700 px-6 py-3 rounded-lg font-medium transition duration-300">
                        快速开始
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 fade-in">
                <div class="bg-white rounded-xl shadow-2xl overflow-hidden">
                    <div class="bg-gray-800 text-gray-300 p-4 flex items-center">
                        <div class="flex space-x-2 mr-4">
                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-sm">terminal</div>
                    </div>
                    <div class="p-6 bg-gray-900 text-green-400 font-mono text-sm">
                        <p class="mb-2">$ claude /cleanproject</p>
                        <p class="text-white mb-2">正在清理项目... 移除了3个调试文件和2个备份文件</p>
                        <p class="text-gray-500">项目已清理完成，生产代码保持不变</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Section -->
    <section class="py-16 px-6 bg-white">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4">它能解决什么问题？</h2>
                <div class="w-20 h-1 bg-indigo-600 mx-auto"></div>
            </div>
            <div class="grid md:grid-cols-2 gap-10">
                <div class="fade-in">
                    <div class="bg-gray-50 p-8 rounded-xl shadow-sm h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full mr-4">
                                <i class="fas fa-exclamation-triangle text-xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Claude的痛点</h3>
                        </div>
                        <p class="text-gray-700 mb-4">使用 Claude Code CLI 时，开发者常遇到 AI 输出过于冗长或偏离需求的问题。例如：</p>
                        <ul class="list-disc pl-5 space-y-2 text-gray-700">
                            <li>修复一个 bug 可能得到一堆测试文件</li>
                            <li>简单重构可能变成代码架构论文</li>
                            <li>手动输入详细指令耗时且结果仍不理想</li>
                        </ul>
                    </div>
                </div>
                <div class="fade-in">
                    <div class="bg-gray-50 p-8 rounded-xl shadow-sm h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-green-100 text-green-600 p-3 rounded-full mr-4">
                                <i class="fas fa-lightbulb text-xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">CCPlugins的解决方案</h3>
                        </div>
                        <p class="text-gray-700 mb-4">CCPlugins 通过预定义的智能命令解决这些问题：</p>
                        <ul class="list-disc pl-5 space-y-2 text-gray-700">
                            <li>结构化的命令减少冗长输出</li>
                            <li>针对Claude优化的专业命令</li>
                            <li>确保输出直接、实用，减少手动清理和调整时间</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-6 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4">核心功能概述</h2>
                <div class="w-20 h-1 bg-indigo-600 mx-auto"></div>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="command-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg fade-in">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-broom text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">代码清理 <span class="text-sm bg-indigo-100 text-indigo-800 px-2 py-1 rounded">/cleanproject</span></h3>
                    <p class="text-gray-700">移除调试文件、临时测试和备份文件，保留干净的生产代码，保持项目整洁。</p>
                </div>
                <div class="command-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg fade-in">
                    <div class="text-blue-600 mb-4">
                        <i class="fas fa-search text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">代码审查 <span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">/review</span></h3>
                    <p class="text-gray-700">通过子代理分析安全、性能和代码质量，提供简洁的审查报告，避免冗长的架构建议。</p>
                </div>
                <div class="command-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg fade-in">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-tasks text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">会话管理 <span class="text-sm bg-purple-100 text-purple-800 px-2 py-1 rounded">/session-*</span></h3>
                    <p class="text-gray-700">记录编码会话目标和成果，支持跨会话上下文跟踪，提升项目连续性。</p>
                </div>
                <div class="command-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg fade-in">
                    <div class="text-green-600 mb-4">
                        <i class="fas fa-code-branch text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">智能重构 <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">/refactor</span></h3>
                    <p class="text-gray-700">自动识别重构范围，验证迁移完整性，生成简洁代码，减少手动调整。</p>
                </div>
                <div class="command-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg fade-in">
                    <div class="text-red-600 mb-4">
                        <i class="fas fa-vial text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">测试自动化 <span class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded">/test</span></h3>
                    <p class="text-gray-700">运行测试并自动修复简单问题，生成必要测试用例，简化测试流程。</p>
                </div>
                <div class="command-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg fade-in">
                    <div class="text-yellow-600 mb-4">
                        <i class="fas fa-bolt text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">快速实现 <span class="text-sm bg-yellow-100 text-yellow-800 px-2 py-1 rounded">/implement</span></h3>
                    <p class="text-gray-700">为Node.js应用添加新功能，生成代码框架并自动验证集成完整性。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-6 bg-white">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4">使用场景</h2>
                <div class="w-20 h-1 bg-indigo-600 mx-auto"></div>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="fade-in">
                    <div class="bg-gray-50 p-6 rounded-xl h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                                <i class="fas fa-user"></i>
                            </div>
                            <h3 class="text-lg font-semibold">独立开发者</h3>
                        </div>
                        <p class="text-gray-700 mb-4">使用 <span class="bg-indigo-100 text-indigo-800 px-1 rounded">/cleanproject</span> 移除调试日志和临时文件，确保代码库整洁。通过 <span class="bg-blue-100 text-blue-800 px-1 rounded">/review</span> 快速检查文件的安全性和性能问题，获得简洁建议，节省手动审查时间。</p>
                        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                            <p class="text-yellow-800 font-medium">思考问题：</p>
                            <p class="text-yellow-700">你的项目中是否存在重复的清理或审查任务可以交给 CCPlugins 自动化？</p>
                        </div>
                    </div>
                </div>
                <div class="fade-in">
                    <div class="bg-gray-50 p-6 rounded-xl h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-100 text-purple-600 p-2 rounded-full mr-3">
                                <i class="fas fa-users"></i>
                            </div>
                            <h3 class="text-lg font-semibold">团队协作开发</h3>
                        </div>
                        <p class="text-gray-700 mb-4">一个前端团队使用 <span class="bg-purple-100 text-purple-800 px-1 rounded">/session-start</span> 初始化 React 项目会话，记录目标（如"实现用户登录组件"）。开发完成后，<span class="bg-purple-100 text-purple-800 px-1 rounded">/session-end</span> 自动生成会话总结，同步到团队 Notion 数据库，保持进度透明。</p>
                    </div>
                </div>
                <div class="fade-in">
                    <div class="bg-gray-50 p-6 rounded-xl h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-green-100 text-green-600 p-2 rounded-full mr-3">
                                <i class="fas fa-rocket"></i>
                            </div>
                            <h3 class="text-lg font-semibold">快速功能实现</h3>
                        </div>
                        <p class="text-gray-700 mb-4">开发者需为 Node.js 应用添加新功能，使用 <span class="bg-yellow-100 text-yellow-800 px-1 rounded">/implement</span> 命令生成代码框架，自动验证集成完整性，避免手动编写样板代码，加速开发。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 px-6 bg-indigo-50">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4">优势与特色</h2>
                <div class="w-20 h-1 bg-indigo-600 mx-auto"></div>
            </div>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="fade-in">
                    <div class="bg-white p-8 rounded-xl shadow-sm h-full">
                        <h3 class="text-xl font-semibold mb-6 text-indigo-700">CCPlugins 在 AI 辅助开发工具中独具优势：</h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-4 flex-shrink-0">
                                    <i class="fas fa-comments"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">对话式命令设计</h4>
                                    <p class="text-gray-700">采用类似"我会帮你清理项目"的对话式指令，优于命令式（如"CLEAN PROJECT"），更符合 Claude 的语义理解，提升输出质量。</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-blue-100 text-blue-600 p-2 rounded-full mr-4 flex-shrink-0">
                                    <i class="fas fa-tools"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">专注实用性</h4>
                                    <p class="text-gray-700">24 个命令针对真实开发场景（如重构、测试），避免 Claude 的过度工程化输出，优于通用 AI 工具如 Copilot。</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-green-100 text-green-600 p-2 rounded-full mr-4 flex-shrink-0">
                                    <i class="fas fa-code-branch"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">开源与可扩展</h4>
                                    <p class="text-gray-700">基于 MIT 许可，允许用户添加自定义命令，适配不同项目需求，优于封闭工具如 JetBrains AI。</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-purple-100 text-purple-600 p-2 rounded-full mr-4 flex-shrink-0">
                                    <i class="fas fa-laptop"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">跨平台支持</h4>
                                    <p class="text-gray-700">支持 macOS、Linux 和 Windows，安装简便，适配多种开发环境。</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="fade-in">
                    <div class="bg-white p-8 rounded-xl shadow-sm h-full">
                        <h3 class="text-xl font-semibold mb-6 text-indigo-700">局限性：</h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <div class="bg-red-100 text-red-600 p-2 rounded-full mr-4 flex-shrink-0">
                                    <i class="fas fa-link"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">依赖 Claude Code CLI</h4>
                                    <p class="text-gray-700">需预装 Claude Code CLI 和 Anthropic API 密钥，可能增加成本。</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-orange-100 text-orange-600 p-2 rounded-full mr-4 flex-shrink-0">
                                    <i class="fab fa-linux"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">Linux 兼容性问题</h4>
                                    <p class="text-gray-700">部分用户报告安装脚本问题，需手动修复。</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-yellow-100 text-yellow-600 p-2 rounded-full mr-4 flex-shrink-0">
                                    <i class="fas fa-exclamation-circle"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">功能范围有限</h4>
                                    <p class="text-gray-700">专注于命令式工作流，不支持复杂 UI 或实时监控，需搭配其他工具。</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-gray-100 text-gray-600 p-2 rounded-full mr-4 flex-shrink-0">
                                    <i class="fas fa-users"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">社区维护</h4>
                                    <p class="text-gray-700">开源项目依赖社区更新，存在 90+ 开放问题，可能影响新功能开发。</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Cost Section -->
    <section class="py-16 px-6 bg-white">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4">使用门槛与成本</h2>
                <div class="w-20 h-1 bg-indigo-600 mx-auto"></div>
            </div>
            <div class="bg-gray-50 rounded-xl p-8 max-w-3xl mx-auto fade-in">
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-indigo-700">成本模型</h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <div class="bg-green-100 text-green-600 p-2 rounded-full mr-4 flex-shrink-0">
                                    <i class="fas fa-check"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">免费版本</h4>
                                    <p class="text-gray-700">核心功能完全免费，需自托管，依赖 Python 3.8+ 和 Claude Code CLI。</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-blue-100 text-blue-600 p-2 rounded-full mr-4 flex-shrink-0">
                                    <i class="fas fa-key"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">高级功能</h4>
                                    <p class="text-gray-700">AI 功能需 Anthropic API 密钥，成本依使用量而定。</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-indigo-700">技术要求</h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <div class="bg-purple-100 text-purple-600 p-2 rounded-full mr-4 flex-shrink-0">
                                    <i class="fas fa-server"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">系统要求</h4>
                                    <p class="text-gray-700">需 Python 3.8+、Git 和 Claude Code CLI。最低硬件要求为 2GB 内存和 500MB 存储空间。</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-yellow-100 text-yellow-600 p-2 rounded-full mr-4 flex-shrink-0">
                                    <i class="fas fa-terminal"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">技能要求</h4>
                                    <p class="text-gray-700">熟悉 CLI 和环境变量配置。</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="mt-8 bg-yellow-50 border-l-4 border-yellow-400 p-4">
                    <p class="text-yellow-800 font-medium">思考问题：</p>
                    <p class="text-yellow-700">你的开发环境是否支持 CCPlugins 的快速安装，还是需要额外配置来适配？</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Quick Start Section -->
    <section id="quick-start" class="py-16 px-6 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4">上手指南</h2>
                <div class="w-20 h-1 bg-indigo-600 mx-auto"></div>
            </div>
            <div class="bg-white rounded-xl shadow-sm overflow-hidden fade-in">
                <div class="border-b border-gray-200">
                    <div class="flex space-x-1 p-4 bg-gray-50">
                        <div class="w-3 h-3 rounded-full bg-red-500"></div>
                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
                    </div>
                </div>
                <div class="p-8">
                    <div class="mb-10">
                        <h3 class="text-xl font-semibold mb-4 text-indigo-700 flex items-center">
                            <span class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                                <i class="fas fa-download"></i>
                            </span>
                            1. 安装先决条件
                        </h3>
                        <div class="bg-gray-900 text-green-400 font-mono text-sm p-4 rounded-lg overflow-x-auto">
                            <p class="mb-2"># Linux/macOS</p>
                            <p class="mb-2">sudo apt install python3 git  # Linux</p>
                            <p class="mb-2">brew install python3 git     # macOS</p>
                            <p class="mb-4"># Windows: 从官网下载安装</p>
                            <p class="mb-2"># 安装Claude Code CLI并配置API密钥</p>
                            <p>echo 'ANTHROPIC_API_KEY=your_key_here' >> ~/.claude/config</p>
                        </div>
                    </div>
                    
                    <div class="mb-10">
                        <h3 class="text-xl font-semibold mb-4 text-indigo-700 flex items-center">
                            <span class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                                <i class="fas fa-terminal"></i>
                            </span>
                            2. 安装 CCPlugins
                        </h3>
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <h4 class="font-medium mb-2 text-gray-700">通过安装脚本</h4>
                                <div class="bg-gray-900 text-green-400 font-mono text-sm p-4 rounded-lg overflow-x-auto">
                                    <p>curl -sSL https://raw.githubusercontent.com/brennercruvinel/CCPlugins/main/install.sh | bash</p>
                                </div>
                            </div>
                            <div>
                                <h4 class="font-medium mb-2 text-gray-700">手动安装</h4>
                                <div class="bg-gray-900 text-green-400 font-mono text-sm p-4 rounded-lg overflow-x-auto">
                                    <p>git clone https://github.com/brennercruvinel/CCPlugins.git</p>
                                    <p>cd CCPlugins</p>
                                    <p>mkdir -p ~/.claude/commands</p>
                                    <p>cp commands/*.md ~/.claude/commands/</p>
                                    <p>python install.py</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-10">
                        <h3 class="text-xl font-semibold mb-4 text-indigo-700 flex items-center">
                            <span class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                                <i class="fas fa-check-circle"></i>
                            </span>
                            3. 验证安装
                        </h3>
                        <div class="bg-gray-900 text-green-400 font-mono text-sm p-4 rounded-lg overflow-x-auto">
                            <p>claude /commands</p>
                            <p class="text-white"># 应显示24个可用命令列表</p>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-indigo-700 flex items-center">
                            <span class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                                <i class="fas fa-code"></i>
                            </span>
                            4. 使用示例
                        </h3>
                        <div class="bg-gray-900 text-green-400 font-mono text-sm p-4 rounded-lg overflow-x-auto">
                            <p># 清理项目</p>
                            <p>claude /cleanproject</p>
                            <p class="mb-4 text-white"># 项目清理完成，移除了5个临时文件</p>
                            
                            <p># 代码审查</p>
                            <p>claude /review UserService.js</p>
                            <p class="mb-4 text-white"># 审查完成：发现2个潜在性能问题和1个安全漏洞</p>
                            
                            <p># 开始新会话</p>
                            <p>claude /session-start 目标:"实现用户登录功能"</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Diagram Section -->
    <section class="py-16 px-6 bg-white">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16 fade-in">
                <h2 class="text-3xl font-bold mb-4">CCPlugins 工作流程</h2>
                <div class="w-20 h-1 bg-indigo-600 mx-auto"></div>
            </div>
            <div class="bg-gray-50 p-8 rounded-xl fade-in">
                <div class="mermaid">
                    graph TD
                        A[开发者输入命令] --> B{命令类型}
                        B -->|清理类| C[/cleanproject<br>移除临时文件]
                        B -->|审查类| D[/review<br>分析代码质量]
                        B -->|会话类| E[/session-start<br>记录开发目标]
                        B -->|重构类| F[/refactor<br>优化代码结构]
                        C --> G[返回清理结果]
                        D --> H[生成审查报告]
                        E --> I[创建会话记录]
                        F --> J[输出重构代码]
                        G --> K[开发者]
                        H --> K
                        I --> K
                        J --> K
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Simple fade-in animation on scroll
        document.addEventListener('DOMContentLoaded', function() {
            const fadeElements = document.querySelectorAll('.fade-in');
            
            const fadeInObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = 1;
                        fadeInObserver.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            fadeElements.forEach(element => {
                element.style.opacity = 0;
                element.style.transition = 'opacity 0.6s ease-out';
                fadeInObserver.observe(element);
            });
        });
    </script>
</body>
</html>
```